<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript" src="../../js/common.config.js"></script>
		<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
		<script type="text/javascript" src="../../js/jquery.base64.js"></script>
		<script type="text/javascript" src="../../js/trade.config.js"></script>
		<script type="text/javascript" src="../../js/util.js"></script>
		<script type="text/javascript" src="../../js/trade.connection.js"></script>
		<script type="text/javascript" src="../../js/trade.send.js"></script>
		<link rel="stylesheet" href="../../css/own.css" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/quotation.css" />
		<link href="../../css/mui.picker.css" rel="stylesheet" />
		<link href="../../css/mui.poppicker.css" rel="stylesheet" />
		<style>
			.commStyle {border-bottom: none; background: #1f1f1f; border-radius: 5px; padding-left:10px;}
			#showUserPicker {width: 60px;height: 40px; line-height: 40px; margin: 0; padding: 0; position: absolute; right: 0; top: 0; background: #383838; font-size: 12px; text-align: center; color: #fff; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav own-topbg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left quotationBack" id="backClose"><i>返回</i></a>
			<h1 class="mui-title">操盘登录</h1>
			<a href="javascript:void(0)" class="top-tel" id="online">在线客服</a>
		</header>
		<div class="mui-content" class="operateLogin">
			<div id="inputList">
				<div id="accountType" class="commStyle" style="display: none;">
					<label>账号类型：</label>
					<select class="accountSelect mui-btn mui-btn-block">
						<option class="mui-selected" id="checkContent" value="1">模拟盘账号</option>
						<!--<option class="mui-selected" value="0">实盘账号</option>-->
					</select>
					<img src="../../images/down.png" id="selectBg">
				</div>
				<div class="commStyle">
					<label>登录账号：</label>
					<input type="text" placeholder="请输入您的账号" id='account' oninput="checkValue()" />
					<img src="../../images/close.png" id="accountClear">
					<div id="showUserPicker"> 切换账号</div>
				</div>
				<div class="commStyle">
					<label>登录密码：</label>
					<input type="password" placeholder="请输入您的密码" id="password" oninput="checkValue()" />
					<img src="../../images/close.png" id="passwordClear">
				</div>
				<div class="mui-content-padded" style="margin-top: 20px;">
					<button class="mui-btn mui-btn-block" id="operateLogin" style="border-radius: 20px;">立即登录</button>
					<button id='regLogin' class="mui-btn mui-btn-block" style="border-radius: 20px; background: #ff6a00; color: #fff;">立即开户</button>
				</div>
				<div class="mui-input-row mui-checkbox mui-left mui-content-padded" id="loginIform">
					<p id="loginAgree"><span id="checkBox"><i ></i></span>
						<sapn>阅读并接受</sapn>
						<a href="javascript:void(0);" id="tzdr_info" style="color: #ff6a00;">《国际期货通行情交易协议》</a>
					</p>
				</div>
				<div>
					<p style="margin-bottom: 10px;">操盘交易帐号 ≠ 注册登录帐号</p>
					<p style="margin-bottom: 10px;">交易帐号：<span style="color: #999999;">申请方案后系统自动发放，用于实盘交易的帐号。可查询交易明细，结算后将会更换。</span></p>
					<p>登录帐号：<span style="color: #999999;">使用手机注册后的平台帐号，用于登录APP和网站，进行充值、提现、查看资金明细等。</span></p>	
				</div>
			</div>
			<!--<div id="username_list">
				<ul>
				</ul>
			</div>-->
		</div>
		<script type="text/javascript">
			document.getElementById("backClose").addEventListener("tap", function() {
				mui.app_refresh(plus.webview.currentWebview().backPage);
			});
			initTradeConfig();
			mui.init();
			tzdr.online();
			var width = window.innerWidth;
			/*$(".commStyle input,.commStyle select").css({
				"width": width - 140 + "px",
			});*/
			/*$("#username_list li").css({
				"width": width - 125 + "px"
			})*/
			mui.plusReady(function() {
//				到开户
				$("#regLogin").on("tap",function(){
					mui.openWindow({
						url : "../future/cp.html",
						in  : "cp"
					})
					console.log("111111")
					mui.app_refresh("cp")
				})
				/*加载新手指南*/
				var islogin = false;
				var num = 0
				$("#checkBox i").val(1);
				$("#checkBox").click(function() {
					if(num == 0) {
						$("#checkBox i").val(2);
						$("#checkBox i").css({
							"background-color": "rgba(0, 0, 0, 0)",
						})
						num = 1
					} else {
						$("#checkBox i").val(1);
						num = 0;
						$("#checkBox i").css({
							"background-color": "#fcc900",
						})
					}
				});
				/*绑定事件
				 */
				$("#accountClear").click(function() {
					$("#account").val("");
					checkValue()
				});
				$("#passwordClear").click(function() {
					$("#password").val("");
					checkValue()
				})
				/*
				 * 选择账号
				 */
				var user_mobile = mui.cacheUser.get(tzdr.constants.user_mobile);
				var user = [];
				if(user_mobile == null) {} else {
					var paramUrl = {
						url: "login.html"
					}
					mui.app_request("/operateLogin", { mobile: user_mobile }, function(result) {
						var data = result.data;
						var Len = data.length;
						for(var i = 0; i <= Len; i++) {
							if(i == Len) {

							} else {
								var acount = {};
								acount.tranAccount = data[i].tranAccount;
								acount.tranPassword = data[i].tranPassword;
								user[i] = acount;
								$("#username_list ul").append("<li>" + data[i].tranAccount + "</li>")
							}
						};
						$("#username_list li").css({
							"width": width - 115 + "px"
						});
						$("#username_list ul li").on("tap", function() {
							var index = $(this).index();
							$("#account").val(user[index].tranAccount);
							$("#password").val(user[index].tranPassword);
							$("#username_list").css({
								"display": "none"
							});
							checkValue();
						});
					}, function(result) {}, paramUrl);
				}
				var accountEnd = endLoginAccount == null ? "" : endLoginAccount;
				if(accountEnd != "") {
					$("#userAcount").show();
				}
				if($("#account").val() != "" || $("#account").val() != null) {
					$("#operateLogin").css({
						"background-color": "#fcc900"
					});
				}
				
				var web=plus.webview.currentWebview();
				var trade_account=web.trade_account;
				var trade_password=web.trade_password;
				if(trade_account){
					$("#account").val(trade_account);
					$("#password").val(trade_password);
				}else {
//					console.log(accountEnd);
//					if(accountEnd){
//						$("#account").val(accountEnd);
//						$("#password").val(endLoginPassword == null ? "" : $.base64.decode(endLoginPassword));
//					}else {
						//      下面代码实现抓取用户的账号密码并显示到input框里	
						if(mui.cacheUser.isLogin()) {
//							var user_token = plus.storage.getItem(tzdr.constants.user_token);
//							var user_secret = plus.storage.getItem(tzdr.constants.user_secret);
							mui.app_request("/user/ftrade/list", {}, function(result) {
								if(!mui.isnull(result.data)) {
									ftrade_list = result.data.tradeList;
									mui.each(ftrade_list, function(i, item) {
			//							console.log(JSON.stringify(item.stateType));
										if(item.stateType==4){
											mui.app_request('/user/ftrade/details',{"id":item.id},function(result){
			//									console.log(JSON.stringify(result.data.details.tranAccount));
			//									console.log(JSON.stringify(result.data.details.tranPassword));
												$('#account').val(result.data.details.tranAccount);
												$('#password').val(result.data.details.tranPassword);
											});
											return false;
										}else{
											$('#account').val('');
											$('#password').val('');
											return false;
										}
									});
								}
							}, function(result) {
								mui.toast(result.message);
								return;
							});
						};
//					}
				}
				
				if(tradeWebSocketIsMock != undefined && tradeWebSocketIsMock != null) {
					$(".accountSelect").val(tradeWebSocketIsMock);
				} else {
					$(".accountSelect").val(1);
					tradeWebSocketIsMock = 1;
				}
				$(".accountSelect").change(function() {
					var $this = $(this);
					var val = $this.val();
					setTradeConfig(val);
					checkValue();
					if(val == 0) {
						$("#account").bind("focus", function() {
							$("#username_list").css({
								"display": "block"
							})
						});
						$("#regLogin").unbind("tap", loginCheckBind);
						$("#regLogin").bind("tap", loginCheck);
						$("#regLogin").text("实盘开户申请")
					} else {
						$("#account").unbind("focus");
						$("#regLogin").unbind("tap", loginCheck);
						$("#regLogin").bind("tap", loginCheckBind);
						$("#regLogin").text("模拟盘开户申请")
					}
				});
				$("#account").bind("focus", function() {
					$("#username_list").css({
						"display": "block"
					})
				});
				$("#account").bind("blur", function() {
					$("#username_list").css({
						"display": "none"
					});
				});
				if($("#account").val().length > 0) {
					$("#accountClear").css({
						"display": "block"
					});
				}
				if($("#password").val().length > 0) {
					$("#passwordClear").css({
						"display": "block"
					});
				}
				/**
				 * 登录超时处理 
				 */
				var loginSetTimeOut = null;

				function setTimeOutIsLogin() {
					loginSetTimeOut = setTimeout(function() {
						if(!islogin) {
							plus.nativeUI.closeWaiting();
							mui.toast("网络不给力");
						}
					}, 10000);
				}
				var Transfer = plus.webview.currentWebview();
				var commdityNo = Transfer.commdityNo;
				var account = null;
				var pwd = null;
				$("#regLogin").bind("tap", loginCheck);

				function loginCheck() {
					$(".top,.bottom").css({
						"display": "none",
					});
					mui.openWindow({
						url: "../future/cp.html",
						id: "cp"
					});
				}

				function loginCheckBind() {
					mui.openWindow("regist.html");
				}
				/*document.getElementById("forgetPassword").addEventListener("tap", function() {
					mui.openWindow("retrievePassword.html");
				});*/
				document.getElementById("backClose").addEventListener("tap", function() {
					if(Transfer.backpageID) {
						backReload();
					} else {
						mui.back();
					}
				});
					getVersion();
				$("#operateLogin").click(function() {
						account = document.getElementById("account").value;
						pwd = $.base64.encode(document.getElementById("password").value);
						if(mui.isnull(account)) {
							mui.toast("请输入账号");
							return;
						};
						if(mui.isnull(pwd)) {
							mui.toast("请输入密码");
							return;
						}
						if($("#checkBox i").val() == 1) {
	
						} else {
							mui.toast("您还未勾选协议");
							return;
						};
						setTradeConfig(tradeWebSocketIsMock);
						plus.nativeUI.showWaiting("正在登录中");
						setTimeOutIsLogin();
						var loginSocket = new WebSocket(socketUrl);
						loginSocket.onopen = function() {
							loginSocket.send('{"Method":"' + TradeUrl.LoginUrl + '","Parameters":{"ClientNo":"' + account + '","PassWord":"' + pwd + '","IsMock":' + tradeWebSocketIsMock + ',"Version":"' + tradeWebSocketVersion + '","Source":"' + Source + '"}}');
						}
						loginSocket.onmessage = function(evt) {
							var dataString = evt.data;
							var data = JSON.parse(dataString);
							var method = data.Method;
							var parameters = data.Parameters;
							if(method == "OnRspLogin") {
								var code = parameters.Code;
								var loginMessage = parameters.Message;
								if(code == 0) {
									localStorage.setItem("trade_account", account);
									localStorage.setItem("trade_password", pwd);
									localStorage.setItem("trade_endLoginAccount", account);
									localStorage.setItem("trade_endLoginPassword", pwd);
									if(Transfer.backpageID) {
										backReload();
										plus.nativeUI.closeWaiting();
										mui.toast("登录成功");
										localStorage.setItem("isMock", tradeWebSocketIsMock);
										islogin = true;
										mui.back();
//										mui.toast("111");
									} else {
										plus.nativeUI.closeWaiting();
										mui.toast("登录成功");
										localStorage.setItem("isMock", tradeWebSocketIsMock);
										islogin = true;
										mui.app_refresh("quotationMain");
										mui.openWindow({
											url: "../quotation/quotationMain.html",
											id: "quotationMain",
											extras: {
												Operation_content: "1"
											}
										});
									}
								} else {
									alertProtype(loginMessage, "提示", Btn.confirmed());
									plus.nativeUI.closeWaiting();
								}
							}
						}
						loginSocket.onclose = function() {
							if(loginSetTimeOut != null) {
								clearTimeout(loginSetTimeOut);
							}
						}
				});

				function backReload() {
					plus.webview.getWebviewById("transactionDetails").reload();
				};
				document.getElementById("tzdr_info").addEventListener("tap", function() {
					mui.openWindow({
						url: "../agree/tradingMarket.html",
						id: "tradingMarket"
					})
				});
				checkValue();
			});
			/*按钮变色*/
			function checkValue() {
				var account = $("#account").val();
				var password = $("#password").val();
				if(password.length > 0 && password.length > 0) {
					$("#operateLogin").css({
						"background-color": "#fcc900"
					});
				} else {
					$("#operateLogin").css({
						"background-color": "#cccccc"
					});
				};
				if(account == "" || account == null || account.length == 0) {
					$("#accountClear").css({
						"display": "none"
					});
				}
				if(password == "" || password == null || password.length == 0) {
					$("#passwordClear").css({
						"display": "none"
					});
				};
				if(account.length > 0) {
					$("#accountClear").css({
						"display": "block"
					});
				}
				if(password.length > 0) {
					$("#passwordClear").css({
						"display": "block"
					});
				}
			};
		</script>
	</body>
	<script src="../../js/mui.picker.js"></script>
	<script src="../../js/mui.poppicker.js"></script>
	<script>
		var ftrade_list = null;
		mui.plusReady(function() {
			if(mui.cacheUser.isLogin()){
				mui.app_request("/user/ftrade/list", {}, function(result) {
					if(!mui.isnull(result.data)) {
						ftrade_list = result.data.tradeList;
						mui.each(ftrade_list, function(i, item) {
							addlistNO(item);
						});
					}
				});
			}else{
//				var re = plus.webview.getWebviewById("operateLogin");
//				if(re != null && re != undefined) {
//					re.reload();
//				}
				localStorage.removeItem('arr');
			}
		});
		var arr = [];
		function addlistNO(ftrade_list){
			mui.app_request("/user/ftrade/details", {
				"id": ftrade_list.id
			}, function(result) {
				if(!mui.isnull(result.data.details)) {
					if(result.data.details.stateType == 4) {
						var datas = {};
						datas.tranAccount = result.data.details.tranAccount;
						datas.tranPassword = result.data.details.tranPassword;
						arr.push(datas);
						localStorage.setItem('arr', JSON.stringify(arr));
					}
				}
			});
		}
		(function($, doc) {
			$.init();
			$.ready(function() {
				/**
				 * 获取对象属性的值
				 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
				 * @param {Object} obj 对象
				 * @param {String} param 属性名
				 */
				var _getParam = function(obj, param) {
					return obj[param] || '';
				};
				//普通示例
				var dataArr = JSON.parse(localStorage.getItem("arr"));
				if(dataArr) {
					var cityData = [];
					for(var i = 0; i<dataArr.length; i++){
						var cityVal = {};
						cityVal.text = dataArr[i].tranAccount;
						cityVal.password = dataArr[i].tranPassword;
						cityData.push(cityVal);
					}
//					console.log(JSON.stringify(cityData));
					var userPicker = new $.PopPicker();
					userPicker.setData(cityData);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var account = doc.getElementById('account');
					var passwords = doc.getElementById('password');
					showUserPickerButton.addEventListener('tap', function(event) {
						console.log(JSON.stringify(event));
						userPicker.show(function(items) {
							account.value = _getParam(items[0], 'text');
							passwords.value = _getParam(items[0], 'password');
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);	
				}else {
					document.getElementById("showUserPicker").addEventListener("tap", function() {
						mui.toast("您还没有操盘账号，请先开户申请。");
		  				return;
					});
				}
			})
		})(mui, document);
	</script>
</html>